/**
 * ==================================
 * 顽瘴痼疾排行
 * ==================================
 */
import { useRequest } from 'ahooks'
import { FC, useEffect, useMemo, useRef, useState } from 'react'

import { Tb } from '../../../BigScreenBase/ModuleTitle'
import WordHScroll from '../../../BigScreenWarn/Components/WordHScroll'
import DisplayCard from '../../Components/DisplayCard'
import ListRanking, { ColumnType } from '../../Components/ListRanking'
import { SafeIndexOrderRecord, getSafeIndexOrder } from '../../data'
import rank1 from '../../images/redRank1.png'
import rank2 from '../../images/redRank2.png'
import rank3 from '../../images/redRank3.png'

const rankImg = [rank1, rank2, rank3]

export type SafeIndexDownRankingProps = { entId: string }

const stubbornMiasmaRankingTabList = [
  {
    name: '企业',
    value: 3,
    label: '企业名称'
  },
  {
    name: '车辆',
    value: 2,
    label: '车牌号码'
  },
  {
    name: '司机',
    value: 1,
    label: '司机姓名'
  }
]

const StubbornMiasmaRanking: FC<SafeIndexDownRankingProps> = ({ entId }) => {
  const currentDataTypeTabIndexRef = useRef<number>(0)
  const [activeTabKey, setActiveTabKey] = useState<number>(3)
  const timerRef = useRef<NodeJS.Timeout>()

  const activeTeb = useMemo(
    () =>
      stubbornMiasmaRankingTabList.find((item) => item.value === activeTabKey),
    [activeTabKey]
  )
  const columns: ColumnType<SafeIndexOrderRecord>[] = [
    {
      title: '排行',
      key: 'index',
      width: 40,
      align: 'center',
      render(_, record, index) {
        return index < 3 ? (
          <div style={{ height: 16 }}>
            <img src={rankImg[index]} style={{ width: 16, height: 16 }} />
          </div>
        ) : (
          index + 1
        )
      }
    },
    {
      title: activeTeb!.label,
      key: 'name',
      width: activeTabKey === 3 ? 160 : activeTabKey === 2 ? 86 : 54,
      align: 'left',
      render(value, record, index) {
        const style = index < 3 ? { color: '#FF6666' } : {}
        return (
          <div
            style={{
              width: '100%',
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              paddingRight: 4,
              ...style
            }}
          >
            <WordHScroll>
              <span>{value}</span>
            </WordHScroll>
          </div>
        )
      }
    },
    {
      title: activeTabKey === 2 ? '企业/司机' : '企业名称',
      key: 'entName',
      width: activeTabKey === 2 ? 74 : 106,
      align: 'left',
      hidden: () => activeTabKey === 3,
      render(value) {
        return (
          <div
            style={{ width: '100%', overflow: 'hidden', whiteSpace: 'nowrap' }}
          >
            <WordHScroll>
              <span>{value}</span>
            </WordHScroll>
          </div>
        )
      }
    },
    {
      title: '治理前',
      key: 'beforeScope',
      width: 48,
      align: 'center'
    },
    {
      title: '治理(次)',
      key: 'number',
      width: 55,
      align: 'center',
      style: (_, record, index) => (index < 3 ? { color: '#FF6666' } : {})
    },
    {
      title: '治理后',
      key: 'afterScope',
      width: 46,
      align: 'center'
    },
    {
      title: '环比',
      key: 'huanBiScope',
      width: 62,
      align: 'center',
      style: (_, record, index) => (index < 3 ? { color: '#FF6666' } : {}),
      render(v) {
        return v + '%'
      }
    }
  ]

  const { data = [] } = useRequest(
    async () => {
      const res = await getSafeIndexOrder({
        entId,
        type: activeTabKey,
        safeIndexType: 'error',
        topNum: 30
      })
      return res
    },
    {
      refreshDeps: [activeTabKey, entId]
    }
  )

  function startInterval() {
    stopInterval()
    timerRef.current = setInterval(() => {
      const newIndex =
        (currentDataTypeTabIndexRef.current + 1) %
        stubbornMiasmaRankingTabList.length
      const newValue = stubbornMiasmaRankingTabList[newIndex].value

      currentDataTypeTabIndexRef.current = newIndex

      setActiveTabKey(newValue as number)
    }, 60 * 1000)
  }

  function stopInterval() {
    timerRef.current && clearInterval(timerRef.current)
  }

  useEffect(() => {
    startInterval()
    return () => {
      stopInterval()
    }
  }, [])

  const onModuleTitleTabChange = (option: Tb) => {
    const newIndex = stubbornMiasmaRankingTabList.findIndex(
      (item) => item.value === option.value
    )

    currentDataTypeTabIndexRef.current = newIndex
    setActiveTabKey(option.value as number)
  }

  function onModuleTitleTabMouseEnter() {
    stopInterval()
  }

  function onModuleTitleTabMouseLeave() {
    startInterval()
  }
  return (
    <DisplayCard
      title="顽瘴痼疾排行"
      height={304}
      moduleTitleTabList={stubbornMiasmaRankingTabList}
      onModuleTitleTabChange={onModuleTitleTabChange}
      onModuleTitleTabMouseEnter={onModuleTitleTabMouseEnter}
      onModuleTitleTabMouseLeave={onModuleTitleTabMouseLeave}
      activeTabKey={activeTabKey}
      bodyStyle={{
        height: 'calc(100% - 42px)',
        paddingBottom: 21
      }}
    >
      <ListRanking
        dataSource={data}
        columns={columns}
        autoScroll
        rgbColor="255,102,102"
        depReset={[activeTabKey]}
        emptyText="暂无顽瘴痼疾排行"
      />
    </DisplayCard>
  )
}

export default StubbornMiasmaRanking
